<!-- 选择学生 -->
<template>
  <div>
    <el-card>
      <div class="box">
        <el-button @click="isshowComponent('Student')">选择学生</el-button>
        <el-button @click="isshowComponent('teacher')">选择导师</el-button>
      </div>
      <!-- 动态组件 -->
      <component :is="componentId"></component>
    </el-card>
  </div>
</template>

<script>
import Student from './components/studentTable.vue'
import Teacher from './components/teacherTable.vue'
export default {
  components: {
    Student,
    Teacher
  },
  data () {
    return {
      componentId: "Student"
    }
  },
  methods: {
    // 动态组件的切换
    isshowComponent (component) {
      this.componentId = component
    }
  },
}
</script>

<style scoped>
.box {
  width: 100%;
  text-align: center;
  margin-bottom: 50px;
}
</style>
